<template>
  <div>
    <ComponentGroup :components="componentsConfig" :customStyle="customStyle" />
  </div>
</template>

<script setup>
import MyButton from './MyButton.vue'
import MyCard from './MyCard.vue'
import ComponentGroup from '@/components/ComponentGroup.vue'
import { ref } from 'vue'

const componentsConfig = ref([
  {
    show: true,
    name: MyButton, // 动态渲染 MyButton 组件
    props: {
      label: 'Click Me',
      type: 'primary'
    }
  },
  {
    show: true,
    name: MyCard, // 动态渲染 MyCard 组件
    props: {
      title: 'Card Title',
      content: 'This is some card content.'
    },
    slots: {
      footer: {
        // 插槽内容可以是另一个组件或自定义内容
        name: MyButton, // 在 MyCard 的 footer 插槽中插入 MyButton
        props: {
          label: 'Footer Button',
          type: 'secondary'
        }
      }
    }
  },
  {
    show: true,
    name: MyButton, // 动态渲染 MyButton 组件
    props: {
      label: 'Click Me',
      type: 'primary'
    }
  }
])

const customStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)', // 每行两个
  gap: '16px', // 可以调整间距
  padding: '16px' // 可以添加内边距
}
</script>

<style lang="scss" scoped></style>
